<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>{$title|default="【66Play】一键记录你的游戏青春"}</title>
    <link rel="stylesheet" href="__ASSET__/Home/mobile/share/css/common.css"/>
    <link rel="stylesheet" href="__ASSET__/Home/mobile/share/css/match.css"/>
    <link rel="stylesheet" href="__ASSET__/Home/mobile3/css/jquery.mobile-1.4.5.min.css">
    <script src="__ASSET__/Home/mobile/share/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="__ASSET__/Home/mobile/share/js/knockout-2.3.0.js"></script>
    <script>
        window._THIS = {
            domain_url : "{:C('LOCAL_DOMAIN')}",
            race_id : '{$video.id}',
            group_id : '',
            downloadUrl : "{:U('/')}",
        };
        {:C('GLOBAL_BDHM')}
    </script>
    <script type="text/javascript" src="__ASSET__/Home/mobile/share/js/match.js?v=1.2"></script>
    <style type="text/css">
        .related-banner{
            width: 100%;
            height: auto;
            padding: 15px 10px;
            -moz-box-sizing: border-box;  
            -webkit-box-sizing: border-box; 
            -o-box-sizing: border-box; 
            -ms-box-sizing: border-box; 
            box-sizing: border-box;
        }
        .about{
            padding-left: 20px;
        }
        .fix_bottom{
              position:fixed;
              left:0;
              bottom:0;
              width:100%;
              z-index:1000;
              height:50px;
              background:rgba(34,137,223,0.9);
              -moz-box-sizing: border-box;  
             -webkit-box-sizing: border-box; 
             -o-box-sizing: border-box; 
             -ms-box-sizing: border-box; 
             box-sizing: border-box;
             border-top:1px solid #2289df;
             -webkit-box-shadow:0 0 3px #666;
             box-shadow:0 0 3px #666;
             padding:4px 10px;
        }
        .feix_login{
               width:40px;
               height:40px;
               background:url('__PUBLIC__/Home/v4/src/images/logo2.png') no-repeat;
               background-size:100% 100%;
               float:left;
        }
        .fix_bottom_con{
              margin-left:5px;
              width:52%;
              float:left;
              font-size:1rem;
              line-height:1.4rem;
              color:#fff;
        }
        .fix_bottom_con_sub{
                 font-size:0.7rem;
                 color:#e8e9ea;
        }
        .download_btn{
                float:left;
                width:60px;
                height:32px;
                margin-top:5px;
                background:#fff;
                border-radius:5px;
                -webkit-border-radius:5px;
                text-align:center;
                line-height:32px;
                color:#2289e9;
        }
        .close_btn{
               width:25px;
               height:25px;
               text-indent:-99999px;
               margin-top:8px;
               display:block;
               float:left;
               margin-left:8px;
               background:url('__PUBLIC__/Home/v4/src/images/close_v.png') no-repeat;
               background-size:100% 100%;

        }
       /* 弹出框 */
       #myPopup {
                padding: 2rem 1.5rem;
                text-align: center;
                z-index: 2000;
                width: 94%;
                left:50%;
                border-radius: .3125em;
                display:none;
                top:50%;
                position:fixed;
                background:#fff; 
                -moz-box-sizing: border-box;  
               -webkit-box-sizing: border-box; 
               -o-box-sizing: border-box; 
               -ms-box-sizing: border-box; 
               box-sizing: border-box;
     }
     #myPopup>p {
        padding: 1rem 1rem 2rem;
        line-height:1.6rem;
     }
     .btncolum>button.ui-btn, .btncolum>button {
                font-weight: lighter;
                text-shadow: none;
                /* height: 4rem; */
                margin: 0;
                padding: 1rem 0;
                background-color: #ededed;
                border-color: #ddd;
                color: #333;
                line-height:1rem;
                text-shadow: 0 1px 0 #f3f3f3;
                width:44%;
                display:inline-block;
     }
     .display-box{
          /* display:-webkit-box;
          display:-moz-box;
          display:-ms-box;
          display:box;
          display:-webkit-flex;
          display:flex; 
          display:-moz-flex; 
          display:-ms-flex;  */
        }
        .ui-content-p{
              font-size:0.95rem;
              color:#333;
              font-family:"微软雅黑";
              line-height:1.4rem;
        }
        .btncolum>button:last-child {
            background: #349ff9;
            border: solid 1px #349ff9;
            color: #fff;
            margin-left: 0.5rem;
            font-weight: lighter;
       }
       /*弹窗*/
        .popbg{
            background: rgb(0,0,0);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            height: 100%;
            display:none;
        }
        @media screen and (min-width: 360px){
                   .fix_bottom_con{
                         width:58%;
                   }
      }
       @media screen and (min-width: 370px){
                   .fix_bottom_con{
                         width:60%;
                   }
      }
       @media screen and (min-width: 410px){
                   .fix_bottom_con{
                         width:63%;
                   }
      }
    </style>
</head>
<body>
    <img class="JS-share_img" style="position: absolute;opacity: 0;filter: alpha(opacity=0);z-index:-999;width:0;height:0;" src="" />
    <div class="header">
        <div class="team1">
            <div class="team1-container">
                <div class="team-logo">
                    <img style="height: 63px; width: 63px;" src="" data-bind="attr:{'src':info().team1.logo}"/>
                </div>
                <div class="team-name" data-bind="text:info().team1.name"></div>
            </div>
        </div>
        <div class="match-info">
            <div class="game-num" data-bind="text:info().title"></div>
            <div class="game-score" data-bind="text:info().score"></div>
            <div class="game-result">
                <span class="win" data-bind="text:info().team1.result"></span><span class="lose" data-bind="text:info().team2.result"></span>
            </div>
        </div>
        <div class="team2">
            <div class="team2-container">
                <div class="team-logo">
                    <img style="height: 63px; width: 63px;" src="" data-bind="attr:{'src':info().team2.logo}"/>
                </div>
                <div class="team-name" data-bind="text:info().team2.name"></div>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="main-box">
            <div class="box-title">精彩时刻</div>
            <div class="video-box" data-bind="foreach: videos">
                <div class="box-item">
                    <div class="item-head">
                        <div class="item-time" data-bind="text:time_point">00:00</div>
                        <div class="circle"></div>
                    </div>
                    <div class="item-box" style="line-height: 162px; height: 162px;">
                        <div class="poster" data-url="" data-bind="attr:{'data-url':uri}">
                            <img class="poster_img" src="" data-bind="attr:{'src':thumb}" alt="封面"/>
                            <img class="poster_play" src="__ASSET__/Home/mobile/share/images/play.png" alt="播放"/>
                            <img class="poster_load" src="__ASSET__/Home/mobile/share/images/load.png" alt="播放"/>
                        </div>
                        <div class="poster1">
                            <img class="poster_play" src="__ASSET__/Home/mobile/share/images/play.png" alt="播放"/>
                            <img class="poster_load1" src="__ASSET__/Home/mobile/share/images/load.png" alt="播放"/>
                        </div>
                        <div class="poster2">
                            <img class="poster_play" src="__ASSET__/Home/mobile/share/images/play.png" alt="播放"/>
                            <img class="poster_load animation" src="__ASSET__/Home/mobile/share/images/load.png" alt="播放"/>
                        </div>
                        <div class="btn">重新播放</div>
                    </div>
                    <div class="item-info" data-bind="text:title"></div>
                </div>
            </div>   
            </div>
    </div>
    <!--banner-->
    <div class="related-banner">
        <a href="" title="" target="_blank">
            <img src="" alt="">
        </a>
    </div>
    <div class="about">
        <span class="box-title">相关比赛</span>
        <div class="circle1">
            <!--<img src="images/yuan.png" alt=""/>-->
        </div>
        <div class="circle">
        </div>
    </div>
    <div class="footer" data-bind="foreach: recommend">
        <div class="footer-item" data-bind="click:_click">
            <div class="f-item-head">
                <div class="game-logo">
                    <img src="" data-bind="attr:{'src':game.logo}" alt=""/>
                </div>
                <div class="game-name" data-bind="text:game.name"></div>
                <div class="game-time">
                    <span data-bind="text:race_date">00:00</span>
                    <i></i>
                </div>
            </div>
            <div class="f-item-main">
                <div class="f-team1">
                    <img src="" style="height: 63px; width: 63px;" data-bind="attr:{'src':team1.logo}" alt=""/>
                </div>
                <div class="f-team-info">
                    <div class="match-num" data-bind="text:title"></div>
                    <div class="match-score">
                        <div class="f-team team-left" data-bind="text:team1.name"></div>
                        <div class="score" data-bind="text:score">0 - 0</div>
                        <div class="f-team team-right" data-bind="text:team2.name"></div>
                        <div class="f-line"></div>
                    </div>
                    <div class="match-result">
                        <span class="" data-bind="text:team1.result, attr: {'class':team1.class}"></span> - <span data-bind="text:team2.result, attr: {'class':team2.class}"></span>
                    </div>
                </div>
                <div class="f-team2">
                    <img src="" style="height: 63px; width: 63px;" data-bind="attr:{'src':team2.logo}" alt=""/>
                </div>
            </div>
        </div>
    </div>
    <div class="fix_bottom">
           <div class="feix_login"></div>
           <div class="fix_bottom_con">
                <p>上66play客户端</p>
                <p class="fix_bottom_con_sub">高清视频 高光片段 一览无余</p>
           </div>
           <a href="ly66play://66play?type=match&id={$video.id}" onclick="show_popup()">
                <span class="download_btn">下载</span>
           </a>
           <span class="close_btn">下载</span>
    </div>
    <div  id="myPopup" class="ui-content usepop back_white">
            <p class="ui-content-p">您还没有下载APP哦~本功能需要安装66Play APP之后才能使用。快来下载吧</p>
            <div class="btncolum display-box">
                <button class="box-flexo cancel ui-btn ui-shadow ui-corner-all" onclick="hid()">取消下载</button>
                <button class="box-flexo ok ui-btn ui-shadow ui-corner-all" onclick="download()">立即下载</button>
            </div>
    </div>
    <div class="popbg" onclick="hid()"></div>
</body>
<script>
     function show_popup () {
             var popup_w=$("#myPopup").width();
             var popup_h=$("#myPopup").innerHeight();
             $("#myPopup").css({"marginLeft":"-47%","marginTop":-(popup_h/2)}).show();
             $(".popbg").css({"height":$(document).height()}).show();
     }
     function  hid () {
           $("#myPopup").hide();
           $(".popbg").hide();
     }
     function download () {
            window.location.href = _THIS.downloadUrl;
     }
     $(function(){
           $(".close_btn").on('click',function(){
              $(".fix_bottom").hide();
           })
     })
</script>
</html>